<template>
    <div class="view">
        <nav-bar title="修改密码" rightText="完成" @clickRight="submit">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="password-wrap">
            <cube-scroll>
                <div class="password-form">
                    <div class="password-form-cell">
                        <div class="password-form-cell-label">短信验证码</div>
                        <input autofocus="autofocus" v-model="code" type="tel" class="password-form-cell-input" maxlength="6" placeholder="请输入验证码"></input>
                        <div class="code-send" :class="{'code-send-disable':sendTime !== 60}" @click="sendCode">{{sendText}}</div>
                    </div>
                    <div class="password-form-cell">
                        <div class="password-form-cell-label">新密码</div>
                        <input v-model="firstPassword" type="password" class="password-form-cell-input" placeholder="请输入新密码"></input>
                    </div>
                    <div class="password-form-cell password-form-cell-last">
                        <div class="password-form-cell-label">确认新密码</div>
                        <input v-model="secondPassword" type="password" class="password-form-cell-input" placeholder="请再次输入新密码"></input>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import UserEntity from "@/entity/UserEntity";
    import {exitUser, updateUser} from "@/store/dispatches";
    import NavBar from "@/components/aui/NavBar.vue";

    @Component({
        components: {
            NavBar
        }
    })
    export default class SettingPassword extends Scene {
        private step: number = 1;
        private sendStatus: boolean = false;
        private sendTime: number = 60;
        private sendTimer: number = 0;
        private firstPassword: string = "";
        private secondPassword: string = "";
        private code: string = "";

        private get sendText(): string {
            if (this.sendTime === 60) {
                this.sendStatus = false;
                return "发送验证码";
            } else {
                if (this.sendTime === 0) {
                    clearInterval(this.sendTimer);
                    this.sendTime = 60;
                    this.sendStatus = false;
                    return "发送验证码";
                } else {
                    return `${this.sendTime}秒后重发`;
                }
            }
        }

        @State("UserStore")
        public user!: InterfaceUser;

        private back() {
            this.navigateBack();
            // if (this.step === 1) {
            //     this.step = this.step - 1;
            // } else {
            //     this.navigateBack();
            //
            // }
        }

        private mounted() {
            //                Http.post(this.api.identify,{phone:this.user.phone},{token:this.user.token});
            // this.sendCodeSuccess();
        }

        private async submit(): Promise<any> {
            if (this.firstPassword !== this.secondPassword || this.firstPassword === "") {
                (<any> this).$createToast({
                    time: 2000,
                    txt: "两次输入的密码不一致，或密码不可为空",
                    type: "warn"
                }).show();
            } else if (this.code === "") {
                (<any> this).$createToast({
                    time: 2000,
                    txt: "请先输入验证码",
                    type: "warn"
                }).show();
            } else {
                let toast = (<any> this).$createToast({
                    time: 0,
                    type: "loading",
                    mask: true,
                    txt: "正在修改密码，请稍后..."
                }).show();
                const CryptoJS = require("crypto-js");
                const res = await Http.post(this.api.forget, {
                    phone: this.user.phone,
                    password: CryptoJS.AES.encrypt(CryptoJS.MD5(this.firstPassword).toString(), CryptoJS.enc.Utf8.parse(this.cryptoKey), {mode: CryptoJS.mode.ECB,}).toString(),
                    code: this.code,
                    type: 1
                }, {token: this.user.token});
                if (res.code === 1) {
                    let user: any = {...res.data, ...res.data.user_info};
                    delete user.user_info;
                    updateUser(CommonUnit.objectUnderlineToHump(user));
                    toast = (<any> this).$createToast({
                        txt: `修改密码成功`,
                        type: "correct",
                        time: 3000,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                } else {
                    toast = (<any> this).$createToast({
                        time: 2000,
                        type: "error",
                        txt: `发生错误：${res.msg}`
                    }).show();
                }

            }
        }

        private sendCode(): void {
            if (!this.sendStatus) {
                this.sendStatus = true;
                Http.post(this.api.identify, {phone: this.user.phone}, {token: this.user.token});
                this.sendCodeSuccess();
                this.sendTimer = setInterval(() => {
                    this.sendTime--;
                }, 1000);
            }

        }

        private sendCodeSuccess(): void {
            (<any> this).$createDialog({
                type: "alert",
                title: `手机号：${CommonUnit.phoneReplaceStar(this.user.phone)}`,
                content: "验证码已发送到该账号绑定的手机上<br>请确认验证码",
                icon: "cubeic-mobile-phone"
            }).show();
        }
    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;

        .password-wrap
            margin-top calc(44px + var(--safe-area-inset-top));
            height calc(100vh - 44px - var(--safe-area-inset-top));

            .password-form
                margin-top 12px;
                background #fff;

                .password-form-cell
                    height 48px;
                    padding-left 15px;
                    position relative;
                    display flex;
                    align-items center


                    &::after
                        content ''
                        display block;
                        position absolute;
                        bottom 0;
                        left 15px;
                        right 0;
                        height 1px;
                        background #ddd;

                    .password-form-cell-label
                        flex 0 0 100px;
                        width 100px;

                    .code-send
                        display block;
                        height 30px;
                        width 90px;
                        text-align center;
                        font-size 12px;
                        line-height 30px;
                        border 1px solid $theme-common-color;
                        border-radius 30px;
                        color $theme-common-color;
                        position absolute;
                        right 12px;
                        top 9px;

                        &.code-send-disable
                            background #bbb
                            color #ff;
                            border 1px solid #bbb;

                    .password-form-cell-input
                        flex 1;
                        height 48px

                        &::-webkit-input-placeholder {
                            color: #bbb;
                            font-size 13px;
                        }

                .password-form-cell-last
                    &::after
                        display none !important;


</style>
